<template>
  <!--添加机构-->
  <section class="component add-organize">
    <el-form :model="createDeptModel" :rules="createDeptRules" ref="createDeptForm" label-width="130px">
      <el-form-item label="机构名称" prop="deptName">
        <el-input v-model="createDeptModel.deptName" size="small"></el-input>
      </el-form-item>
      <el-form-item label="机构性质" prop="deptProperty">
        <el-select size="small" v-model="createDeptModel.deptProperty">
          <el-option v-for="{code,name} in this.$dict.getDict(DictType.DeptProperty)" :key="code" :label="name" :value="code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机构类型" prop="deptType">
        <el-select size="small" v-model="createDeptModel.deptType">
          <el-option v-for="{code,name} in this.$dict.getDict(DictType.DeptType)" :key="code" :label="name" :value="code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="createDeptModel.remark" :autosize="{ minRows:2, maxRows:4}" :maxlength="500"></el-input>
      </el-form-item>
      <el-form-item label-width="0px">
        <el-row type="flex" justify="center">
          <el-button @click="close('createDeptForm')">取消</el-button>
          <el-button @click="createDept('createDeptForm')">确定</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { State, Getter } from "vuex-class";
import { DepartmentService } from "~/service/service-manage/department.service";
import { DictType } from "~/config/enum/dict/dict-type.enum";
import { EnableStatus } from "~/config/enum/dict/dict-item.enum";
import { Provide, Prop } from "vue-property-decorator";

@Component({
  components: {}
})
export default class AddOrganize extends Vue {
  @Dependencies(DepartmentService)
  private departmentService: DepartmentService;

  private DictType: any = DictType;
  private EnableStatus: any = EnableStatus;

  private disabled: boolean = false;

  @Prop({ type: String, required: true }) deptPid;

  // 创建机构参数
  private createDeptModel: any = {
    deptName: "",
    deptPid: this.deptPid,
    deptProperty: "",
    deptType: "",
    remark: ""
  };

  /**
   * 添加机构信息校验规则
   */
  private createDeptRules: any = {
    deptName: { required: true, message: "请输入机构名称", trigger: "blur" },
    deptType: { required: true, message: "请选择机构类型", trigger: "change" },
    deptProperty: { required: true, message: "请选择机构性质", trigger: "change" }
  };

  /**
   * 添加机构确认
   */
  createDept(formName) {
    let createDeptFrom: any = this.$refs[formName];
    createDeptFrom.validate(valid => {
      if (valid) {
        let model = Object.assign(this.createDeptModel, { "deptPid": this.deptPid })
        this.departmentService.createDept(this.createDeptModel).subscribe(
          data => {
            this.$message.success("添加成功");
            this.$emit("refresh");
            this.close(formName);
          },
          err => this.$message.error(err.msg)
        );
      }
    });
  }

  /**
   * 关闭窗口
   */
  close(formName) {
    let form: any = this.$refs[formName];
    form.resetFields();
    this.$emit("close");
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.data-grid {
  margin-bottom: 10px;
}

.header {
  border: solid 1px #dee1e5;
  border-bottom: 0px;
  height: 40px;
  line-height: 40px;
}
</style>
